<template>
  <view class="styles-container">
    <!-- 页面标题 -->
    <view class="page-header">
      <text class="page-title">风格管理</text>
      <button class="add-btn" @click="showAddModal">新增风格</button>
    </view>
    
    <!-- 搜索和筛选区域 -->
    <view class="search-bar">
      <view class="search-input">
        <text class="iconfont icon-search"></text>
        <input 
          type="text" 
          v-model="searchKeyword" 
          placeholder="搜索风格名称或描述" 
          @confirm="searchStyles"
        />
      </view>
      <view class="filter-options">
        <picker 
          @change="handleFilterChange" 
          :value="filterIndex" 
          :range="filterOptions"
        >
          <view class="picker-view">
            <text>{{ filterOptions[filterIndex] }}</text>
            <text class="iconfont icon-down"></text>
          </view>
        </picker>
      </view>
    </view>
    
    <!-- 风格列表 -->
    <scroll-view 
      scroll-y 
      class="styles-list"
      @scrolltolower="loadMoreStyles"
      refresher-enabled
      :refresher-triggered="isRefreshing"
      @refresherrefresh="refreshStyles"
    >
      <view v-if="styles.length === 0" class="empty-state">
        <image src="/static/images/empty.png" mode="aspectFit"></image>
        <text>暂无风格数据</text>
      </view>
      
      <view 
        v-for="(item, index) in styles" 
        :key="item.id" 
        class="style-item"
      >
        <view class="style-info">
          <view class="style-header">
            <text class="style-name">{{ item.name }}</text>
            <text class="style-status" :class="{'status-public': item.status === 1, 'status-private': item.status === 0}">
              {{ item.status === 1 ? '已上线' : '未上线' }}
            </text>
          </view>
          
          <text class="style-desc">{{ item.description || '暂无描述' }}</text>
          
          <view class="style-preview">
            <image 
              class="preview-image" 
              :src="item.previewImage || '/static/images/default-style.png'" 
              mode="aspectFill"
              @click="previewImage(item.previewImage)"
            ></image>
          </view>
          
          <view class="style-tags" v-if="item.tags && item.tags.length > 0">
            <text 
              v-for="(tag, tagIndex) in item.tags.split(',')" 
              :key="tagIndex"
              class="tag-item"
            >
              {{ tag }}
            </text>
          </view>
          
          <view class="style-stats">
            <view class="stat-item">
              <text class="iconfont icon-user"></text>
              <text>{{ item.useCount || 0 }}次使用</text>
            </view>
            <view class="stat-item">
              <text class="iconfont icon-like"></text>
              <text>{{ item.likeCount || 0 }}点赞</text>
            </view>
            <view class="stat-item">
              <text class="iconfont icon-star"></text>
              <text>{{ item.favoriteCount || 0 }}收藏</text>
            </view>
            <view class="stat-item">
              <text class="iconfont icon-time"></text>
              <text>{{ formatDate(item.createTime) }}</text>
            </view>
          </view>
        </view>
        
        <view class="style-actions">
          <button class="action-btn edit-btn" @click="editStyle(item)">编辑</button>
          <button class="action-btn delete-btn" @click="confirmDelete(item)">删除</button>
          <button class="action-btn view-btn" @click="viewDetails(item)">详情</button>
        </view>
      </view>
      
      <!-- 加载更多提示 -->
      <view v-if="styles.length > 0" class="loading-more">
        <text v-if="hasMore">加载中...</text>
        <text v-else>没有更多数据了</text>
      </view>
    </scroll-view>
    
    <!-- 新增/编辑风格弹窗 -->
    <view v-if="showPopup" class="custom-popup-mask">
      <view class="popup-content">
        <view class="popup-header">
          <text class="popup-title">{{ isEdit ? '编辑风格' : '新增风格' }}</text>
          <text class="close-btn" @click="closePopup">×</text>
        </view>
        
        <view class="form-item">
          <text class="form-label">风格名称</text>
          <input 
            type="text" 
            v-model="formData.name" 
            placeholder="请输入风格名称"
            class="form-input"
          />
        </view>
        
        <view class="form-item">
          <text class="form-label">风格描述</text>
          <textarea 
            v-model="formData.description" 
            placeholder="请输入风格描述"
            class="form-textarea"
          />
        </view>
        
        <view class="form-item">
          <text class="form-label">状态</text>
          <switch 
            :checked="formData.status === 1" 
            @change="handleStatusChange"
            color="#FF69B4"
          />
        </view>
        
        <view class="form-item">
          <text class="form-label">预览图片</text>
          <view class="image-upload">
            <image 
              v-if="formData.previewImage" 
              :src="formData.previewImage" 
              mode="aspectFill"
              class="preview-image"
              @click="chooseImage"
            ></image>
            <view 
              v-else 
              class="upload-placeholder"
              @click="chooseImage"
            >
              <text class="iconfont icon-add"></text>
              <text>上传图片</text>
            </view>
          </view>
        </view>
        
        <!-- <view class="form-item">
          <text class="form-label">标签</text>
          <view class="tags-input">
            <view class="tags-list">
              <view 
                v-for="(tag, index) in formData.tags.split(',')" 
                :key="index"
                class="tag-item"
                v-if="tag.trim()"
              >
                <text>{{ tag }}</text>
                <text class="remove-tag" @click="removeTag(index)">×</text>
              </view>
            </view>
            <input 
              type="text" 
              v-model="newTag" 
              placeholder="输入标签后按回车添加"
              class="tag-input"
              @confirm="addTag"
            />
          </view>
        </view> -->
        
        <view class="form-item">
          <text class="form-label">分类</text>
          <picker 
            @change="handleCategoryChange" 
            :value="categoryIndex"
            :range="styleCategories" 
            range-key="name"
          >
            <view class="picker-view">
              <text>{{ getCategoryName(formData.category) }}</text>
              <text class="iconfont icon-down"></text>
            </view>
          </picker>
        </view>
        
        <view class="form-actions">
          <button class="cancel-btn" @click="closePopup">取消</button>
          <button class="submit-btn" @click="submitForm">确定</button>
        </view>
      </view>
    </view>
    
    <!-- 删除确认弹窗 -->
    <view v-if="showDeletePopup" class="custom-popup-mask">
      <view class="delete-popup">
        <view class="delete-popup-header">
          <text class="delete-popup-title">确认删除</text>
        </view>
        <view class="delete-popup-content">
          <text>确定要删除风格 "{{ currentStyle.name }}" 吗？此操作不可恢复。</text>
        </view>
        <view class="delete-popup-actions">
          <button class="cancel-btn" @click="closeDeletePopup">取消</button>
          <button class="confirm-btn" @click="deleteStyle">确定</button>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { styleApi, imageApi } from '../../utils/api';
import { formatDateTime } from '../../utils/common';

export default {
  data() {
    return {
      // 风格列表数据
      styles: [],
      // 分页参数
      pageNum: 1,
      pageSize: 10,
      total: 0,
      hasMore: true,
      isRefreshing: false,
      
      // 搜索和筛选
      searchKeyword: '',
      filterOptions: ['全部', '已上线', '未上线'],
      filterIndex: 0,
      
      // 风格分类列表
      styleCategories: [],
      
      // 弹窗控制
      showPopup: false,
      isEdit: false,
      formData: {
        id: null,
        name: '',
        description: '',
        status: 1,
        previewImage: '',
        tags: '',
        category: null
      },
      newTag: '',
      categoryIndex: 0,
      
      // 删除确认弹窗
      showDeletePopup: false,
      currentStyle: {}
    };
  },
  
  onLoad() {
    this.checkAdminPermission();
    this.loadStyles();
    this.loadStyleCategories();
  },
  
  methods: {
    // 检查管理员权限
    checkAdminPermission() {
      // const userInfo = uni.getStorageSync('userInfo');
      // if (!userInfo || userInfo.role !== 'admin') {
      //   uni.showToast({
      //     title: '您没有管理员权限',
      //     icon: 'none'
      //   });
      //   setTimeout(() => {
      //     uni.navigateBack();
      //   }, 1500);
      // }
    },
    
    // 加载风格列表
    loadStyles() {
      uni.showLoading({
        title: '加载中...'
      });
      
      // 根据筛选条件设置状态参数
      let status = null;
      if (this.filterIndex === 1) {
        status = 1; // 已上线
      } else if (this.filterIndex === 2) {
        status = 0; // 未上线
      }
      
      // 调用API获取风格列表
      styleApi.getStyles({
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        keyword: this.searchKeyword,
        status: status
      }).then(res => {
        if (res.code === 200) {
          // 如果是第一页，直接赋值；否则追加数据
          if (this.pageNum === 1) {
            this.styles = res.data.list || [];
          } else {
            this.styles = [...this.styles, ...(res.data.list || [])];
          }
          
          this.total = res.data.total || 0;
          this.hasMore = this.styles.length < this.total;
          
          // 如果是刷新操作，停止刷新状态
          if (this.isRefreshing) {
            this.isRefreshing = false;
          }
        } else {
          uni.showToast({
            title: res.message || '加载失败',
            icon: 'none'
          });
        }
      }).catch(err => {
        console.error('加载风格列表失败', err);
        uni.showToast({
          title: '加载失败，请检查网络',
          icon: 'none'
        });
      }).finally(() => {
        uni.hideLoading();
      });
    },
    
    // 加载风格分类列表
    loadStyleCategories() {
      styleApi.getStyleCategories().then(res => {
        if (res.code === 200) {
          this.styleCategories = res.data || [];
          if (this.isEdit && this.formData.category) {
            this.categoryIndex = this.styleCategories.findIndex(category => category.id === this.formData.category);
            if (this.categoryIndex === -1) {
              this.categoryIndex = 0;
            }
          }
        } else {
          uni.showToast({
            title: res.message || '加载分类失败',
            icon: 'none'
          });
        }
      }).catch(err => {
        console.error('加载风格分类列表失败', err);
        uni.showToast({
          title: '加载分类失败，请检查网络',
          icon: 'none'
        });
      });
    },
    
    // 加载更多风格
    loadMoreStyles() {
      if (this.hasMore) {
        this.pageNum++;
        this.loadStyles();
      }
    },
    
    // 刷新风格列表
    refreshStyles() {
      this.isRefreshing = true;
      this.pageNum = 1;
      this.loadStyles();
    },
    
    // 搜索风格
    searchStyles() {
      this.pageNum = 1;
      this.loadStyles();
    },
    
    // 处理筛选条件变化
    handleFilterChange(e) {
      this.filterIndex = e.detail.value;
      this.pageNum = 1;
      this.loadStyles();
    },
    
    // 显示新增风格弹窗
    showAddModal() {
      this.isEdit = false;
      this.formData = {
        id: null,
        name: '',
        description: '',
        status: 1,
        previewImage: '',
        tags: '',
        category: null
      };
      this.newTag = '';
      this.categoryIndex = 0;
      this.showPopup = true;
    },
    
    // 编辑风格
    editStyle(item) {
      this.isEdit = true;
      this.formData = {
        id: item.id,
        name: item.name,
        description: item.description || '',
        status: item.status,
        previewImage: item.previewImage || '',
        tags: item.tags || '',
        category: item.category || null
      };
      this.newTag = '';
      
      // 设置分类选择器的索引
      if (this.styleCategories.length > 0 && this.formData.category) {
        this.categoryIndex = this.styleCategories.findIndex(category => category.id === this.formData.category);
        if (this.categoryIndex === -1) {
          this.categoryIndex = 0;
        }
      } else {
        this.categoryIndex = 0;
      }
      
      this.showPopup = true;
    },
    
    // 关闭弹窗
    closePopup() {
      this.showPopup = false;
    },
    
    // 处理状态变化
    handleStatusChange(e) {
      this.formData.status = e.detail.value ? 1 : 0;
    },
    
    // 处理分类变化
    handleCategoryChange(e) {
      this.categoryIndex = e.detail.value;
      this.formData.category = this.styleCategories[this.categoryIndex].id;
    },
    
    // 选择图片
    chooseImage() {
      uni.chooseImage({
        count: 1,
        sizeType: ['compressed'],
        sourceType: ['album', 'camera'],
        success: (res) => {
          const tempFilePaths = res.tempFilePaths;
          this.uploadImage(tempFilePaths[0]);
        }
      });
    },
    
    // 上传图片
    uploadImage(filePath) {
      uni.showLoading({
        title: '上传中...'
      });
      
      // 调用上传图片API
      imageApi.uploadImage(filePath, (progress) => {
        console.log('上传进度：', progress);
      }).then(res => {
        if (res.code === 200) {
          this.formData.previewImage = res.data.imageUrl;
          uni.showToast({
            title: '上传成功',
            icon: 'success'
          });
        } else {
          uni.showToast({
            title: res.message || '上传失败',
            icon: 'none'
          });
        }
      }).catch(err => {
        console.error('上传图片失败', err);
        uni.showToast({
          title: '上传失败，请检查网络',
          icon: 'none'
        });
      }).finally(() => {
        uni.hideLoading();
      });
    },
    
    // 添加标签
    addTag() {
      if (!this.newTag.trim()) {
        return;
      }
      
      let tags = this.formData.tags ? this.formData.tags.split(',') : [];
      // 检查是否已存在相同标签
      if (!tags.includes(this.newTag.trim())) {
        tags.push(this.newTag.trim());
        this.formData.tags = tags.join(',');
      }
      this.newTag = '';
    },
    
    // 移除标签
    removeTag(index) {
      let tags = this.formData.tags.split(',');
      tags.splice(index, 1);
      this.formData.tags = tags.join(',');
    },
    
    submitForm() {
      // 表单验证
      if (!this.formData.name.trim()) {
        uni.showToast({
          title: '请输入风格名称',
          icon: 'none'
        });
        return;
      }
      
      // 验证分类选择
      if (!this.formData.category) {
        uni.showToast({
          title: '请选择风格分类',
          icon: 'none'
        });
        return;
      }
      
      uni.showLoading({
        title: this.isEdit ? '保存中...' : '创建中...'
      });
      
      // 获取预览图片文件路径
      const previewImage = this.formData.previewImage;
      
      // 如果有预览图片且是本地路径（表示新上传的图片）
      if (previewImage && previewImage.startsWith('file://')) {
        // 先上传图片，再提交表单
        this.uploadImage(previewImage);
      } else {
        // 直接提交表单
        this.submitFormData();
      }
    },
    
    // 提交表单数据
    submitFormData() {
      // 直接使用 formData 对象
      const submitData = {};
      Object.keys(this.formData).forEach(key => {
        if (this.formData[key] !== null && this.formData[key] !== undefined) {
          submitData[key] = this.formData[key];
        }
      });
      
      submitData.coverImage = this.formData.previewImage;
      submitData.previewImage = this.formData.previewImage;
      
      // 调用API保存风格
      const apiMethod = this.isEdit ? styleApi.updateStyle : styleApi.createStyle;
      apiMethod(submitData).then(res => {
        if (res.code === 200) {
          uni.showToast({
            title: this.isEdit ? '保存成功' : '创建成功',
            icon: 'success'
          });
          this.closePopup();
          this.refreshStyles();
        } else {
          uni.showToast({
            title: res.message || (this.isEdit ? '保存失败' : '创建失败'),
            icon: 'none'
          });
        }
      }).catch(err => {
        console.error(this.isEdit ? '保存风格失败' : '创建风格失败', err);
        uni.showToast({
          title: this.isEdit ? '保存失败，请检查网络' : '创建失败，请检查网络',
          icon: 'none'
        });
      }).finally(() => {
        uni.hideLoading();
      });
    },
    
    // 确认删除
    confirmDelete(item) {
      this.currentStyle = item;
      this.showDeletePopup = true;
    },
    
    // 关闭删除确认弹窗
    closeDeletePopup() {
      this.showDeletePopup = false;
    },
    
    // 删除风格
    deleteStyle() {
      uni.showLoading({
        title: '删除中...'
      });
      
      // 调用API删除风格
      styleApi.deleteStyle(this.currentStyle.id).then(res => {
        if (res.code === 200) {
          uni.showToast({
            title: '删除成功',
            icon: 'success'
          });
          this.closeDeletePopup();
          this.refreshStyles();
        } else {
          uni.showToast({
            title: res.message || '删除失败',
            icon: 'none'
          });
        }
      }).catch(err => {
        console.error('删除风格失败', err);
        uni.showToast({
          title: '删除失败，请检查网络',
          icon: 'none'
        });
      }).finally(() => {
        uni.hideLoading();
      });
    },
    
    // 查看风格详情
    viewDetails(item) {
      uni.navigateTo({
        url: `/pages/style/style?id=${item.id}`
      });
    },
    
    // 预览图片
    previewImage(url) {
      if (!url) return;
      
      uni.previewImage({
        urls: [url],
        current: url
      });
    },
    
    // 格式化日期
    formatDate(date) {
      if (!date) return '';
      return formatDateTime(date);
    },
    
    // 获取分类名称
    getCategoryName(categoryId) {
      const category = this.styleCategories.find(category => category.id === categoryId);
      return category ? category.name : '请选择分类';
    }
  }
};
</script>

<style lang="scss">
.styles-container {
  padding: 30rpx;
  min-height: 100vh;
  background-color: #f8f8f8;
  
  .page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30rpx;
    
    .page-title {
      font-size: 36rpx;
      font-weight: bold;
      color: #333;
    }
    
    .add-btn {
      background-color: #FF69B4;
      color: #fff;
      font-size: 28rpx;
      padding: 10rpx 30rpx;
      border-radius: 30rpx;
      border: none;
    }
  }
  
  .search-bar {
    display: flex;
    margin-bottom: 30rpx;
    
    .search-input {
      flex: 1;
      display: flex;
      align-items: center;
      background-color: #fff;
      border-radius: 10rpx;
      padding: 0 20rpx;
      margin-right: 20rpx;
      
      .icon-search {
        margin-right: 10rpx;
        color: #999;
      }
      
      input {
        flex: 1;
        height: 70rpx;
        font-size: 28rpx;
      }
    }
    
    .filter-options {
      width: 180rpx;
      
      .picker-view {
        display: flex;
        align-items: center;
        justify-content: space-between;
        background-color: #fff;
        border-radius: 10rpx;
        padding: 0 20rpx;
        height: 70rpx;
        
        text {
          font-size: 28rpx;
          color: #333;
          
          &:first-child {
            margin-right: 10rpx;
          }
        }
        
        .icon-down {
          font-size: 24rpx;
          color: #999;
        }
      }
    }
  }
  
  .styles-list {
    height: calc(100vh - 200rpx);
    
    .empty-state {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 100rpx 0;
      
      image {
        width: 200rpx;
        height: 200rpx;
        margin-bottom: 20rpx;
      }
      
      text {
        font-size: 28rpx;
        color: #999;
      }
    }
    
    .style-item {
      background-color: #fff;
      border-radius: 12rpx;
      margin-bottom: 30rpx;
      overflow: hidden;
      box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
      
      .style-info {
        padding: 20rpx;
        
        .style-header {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 15rpx;
          
          .style-name {
            font-size: 32rpx;
            font-weight: bold;
            color: #333;
          }
          
          .style-status {
            font-size: 24rpx;
            padding: 4rpx 12rpx;
            border-radius: 20rpx;
            
            &.status-public {
              background-color: #e6f7ff;
              color: #1890ff;
            }
            
            &.status-private {
              background-color: #f5f5f5;
              color: #999;
            }
          }
        }
        
        .style-desc {
          font-size: 28rpx;
          color: #666;
          margin-bottom: 15rpx;
          line-height: 1.5;
        }
        
        .style-preview {
          margin-bottom: 15rpx;
          
          .preview-image {
            width: 100%;
            height: 300rpx;
            border-radius: 8rpx;
            background-color: #f5f5f5;
          }
        }
        
        .style-tags {
          display: flex;
          flex-wrap: wrap;
          margin-bottom: 15rpx;
          
          .tag-item {
            font-size: 24rpx;
            color: #FF69B4;
            background-color: #fff0f6;
            padding: 4rpx 12rpx;
            border-radius: 20rpx;
            margin-right: 10rpx;
            margin-bottom: 10rpx;
          }
        }
        
        .style-stats {
          display: flex;
          flex-wrap: wrap;
          
          .stat-item {
            display: flex;
            align-items: center;
            margin-right: 20rpx;
            margin-bottom: 10rpx;
            
            text {
              font-size: 24rpx;
              color: #999;
              
              &:first-child {
                margin-right: 5rpx;
              }
            }
          }
        }
      }
      
      .style-actions {
        display: flex;
        border-top: 1rpx solid #f5f5f5;
        
        .action-btn {
          flex: 1;
          text-align: center;
          padding: 15rpx 0;
          font-size: 28rpx;
          border: none;
          border-radius: 0;
          background-color: transparent;
          
          &.edit-btn {
            color: #1890ff;
          }
          
          &.delete-btn {
            color: #ff4d4f;
          }
          
          &.view-btn {
            color: #52c41a;
          }
          
          &::after {
            border: none;
          }
        }
      }
    }
    
    .loading-more {
      text-align: center;
      padding: 20rpx 0;
      
      text {
        font-size: 24rpx;
        color: #999;
      }
    }
  }
  
  // 弹窗样式
  .custom-popup-mask {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 999;
    display: flex;
    justify-content: center;
    align-items: center;
    
    .popup-content {
      width: 90%;
      max-height: 80vh;
      background-color: #fff;
      border-radius: 12rpx;
      overflow-y: auto;
      
      .popup-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 30rpx;
        border-bottom: 1rpx solid #f5f5f5;
        
        .popup-title {
          font-size: 32rpx;
          font-weight: bold;
          color: #333;
        }
        
        .close-btn {
          font-size: 40rpx;
          color: #999;
        }
      }
      
      .form-item {
        padding: 20rpx 30rpx;
        border-bottom: 1rpx solid #f5f5f5;
        
        .form-label {
          display: block;
          font-size: 28rpx;
          color: #333;
          margin-bottom: 15rpx;
        }
        
        .form-input {
          width: 100%;
          height: 70rpx;
          border: 1rpx solid #e8e8e8;
          border-radius: 6rpx;
          padding: 0 15rpx;
          font-size: 28rpx;
          box-sizing: border-box;
        }
        
        .form-textarea {
          width: 100%;
          height: 180rpx;
          border: 1rpx solid #e8e8e8;
          border-radius: 6rpx;
          padding: 15rpx;
          font-size: 28rpx;
          box-sizing: border-box;
        }
        
        .image-upload {
          .preview-image {
            width: 200rpx;
            height: 200rpx;
            border-radius: 6rpx;
            background-color: #f5f5f5;
          }
          
          .upload-placeholder {
            width: 200rpx;
            height: 200rpx;
            border: 1rpx dashed #ddd;
            border-radius: 6rpx;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            
            text {
              font-size: 24rpx;
              color: #999;
              
              &:first-child {
                font-size: 40rpx;
                margin-bottom: 10rpx;
              }
            }
          }
        }
        
        .tags-input {
          .tags-list {
            display: flex;
            flex-wrap: wrap;
            margin-bottom: 15rpx;
            
            .tag-item {
              display: flex;
              align-items: center;
              background-color: #fff0f6;
              padding: 6rpx 12rpx;
              border-radius: 30rpx;
              margin-right: 15rpx;
              margin-bottom: 15rpx;
              
              text {
                font-size: 24rpx;
                color: #FF69B4;
                
                &.remove-tag {
                  margin-left: 8rpx;
                  font-size: 28rpx;
                }
              }
            }
          }
          
          .tag-input {
            width: 100%;
            height: 70rpx;
            border: 1rpx solid #e8e8e8;
            border-radius: 6rpx;
            padding: 0 15rpx;
            font-size: 28rpx;
            box-sizing: border-box;
          }
        }
      }
      
      .form-actions {
        display: flex;
        padding: 30rpx;
        
        button {
          flex: 1;
          height: 80rpx;
          line-height: 80rpx;
          font-size: 28rpx;
          border-radius: 6rpx;
          
          &.cancel-btn {
            background-color: #f5f5f5;
            color: #666;
            margin-right: 20rpx;
          }
          
          &.submit-btn {
            background-color: #FF69B4;
            color: #fff;
          }
          
          &::after {
            border: none;
          }
        }
      }
    }
    
    // 删除确认弹窗样式
    .delete-popup {
      width: 80%;
      background-color: #fff;
      border-radius: 12rpx;
      overflow: hidden;
      
      .delete-popup-header {
        padding: 30rpx;
        text-align: center;
        border-bottom: 1rpx solid #f5f5f5;
        
        .delete-popup-title {
          font-size: 32rpx;
          font-weight: bold;
          color: #333;
        }
      }
      
      .delete-popup-content {
        padding: 40rpx 30rpx;
        
        text {
          font-size: 28rpx;
          color: #666;
          line-height: 1.5;
        }
      }
      
      .delete-popup-actions {
        display: flex;
        border-top: 1rpx solid #f5f5f5;
        
        button {
          flex: 1;
          height: 90rpx;
          line-height: 90rpx;
          font-size: 28rpx;
          border-radius: 0;
          
          &.cancel-btn {
            background-color: #f5f5f5;
            color: #666;
            border-right: 1rpx solid #e8e8e8;
          }
          
          &.confirm-btn {
            background-color: #ff4d4f;
            color: #fff;
          }
          
          &::after {
            border: none;
          }
        }
      }
    }
  }
}
</style>
